import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import axios from 'axios'
import { Cell, Popup } from '@nutui/nutui-react'
import { Scan, Setting } from '@nutui/icons-react'
import { Toast } from 'react-vant'
import { Form, Input } from 'antd-mobile'
import '../styles/Login.less'
import '../styles/demo2.less'
import { Button } from '@nutui/nutui-react'
export default function Wei() {
    let navigate = useNavigate()
    const [showBottom, setShowBottom] = useState(false)
    const [showBottom1, setShowBottom1] = useState(false)
    let [tel, settel] = useState('')
    let [yana, setyana] = useState('')

    //获取验证码倒计时
    let [tim, settim] = useState('获取验证码')
    let dao = () => {
        let tims = 60
        let time = setInterval(() => {
            settim(`${tims}s`)
            tims--
            if (tims < 0) {
                clearInterval(time)
                settim('获取验证码')
            }
        }, 1000)
    }
    //阿里云接口
    const [pass, setPass] = useState('');
    let jie = () => {
        axios.get(`http://127.0.0.1:3000/jxy/verifyCode/?tel=${tel}`)
            .then((response) => {
                let a = response.data;
                setPass(a);
            })
            .catch((error) => {
                console.error(error);
                Toast({
                    message: '手机号获取验证码失败，请稍后再试，格式错误',
                    position: 'bottom',
                })
            });
    }

    //正则表达式验证手机号
    let zheng = /^1[3456789]\d{9}$/
    let yan = () => {
        if (zheng.test(tel)) {
            jie()
            dao()
        } else {
            alert('请输入正确的手机号')
        }
    }

    //验证码登入
    let loginyan = async () => {
        if (pass == yana) {
            let data = await axios.post(`http://127.0.0.1:3000/jxy/loginyan?phone=${tel}`)
            if (data.data.code == 200) {
                sessionStorage.setItem('token', data.data.token)
                sessionStorage.setItem('user', JSON.stringify(data.data.user1))
                window.location.reload();
            }
        } else {
            alert('验证码不正确')
        }
    }
    //手机号密码登入
    let [tel1, settel1] = useState('')
    let [password, setpassword] = useState('')
    let loginpass = async () => {
        if (zheng.test(tel1)) {
            if (password != '') {
                let obj = {
                    tel1,
                    password
                }
                let data = await axios.post(`http://127.0.0.1:3000/jxy/loginpass`, obj)
                if (data.data.code == 200) {
                    sessionStorage.setItem('token', data.data.token)
                    sessionStorage.setItem('user', JSON.stringify(data.data.user1))
                    window.location.reload();
                }
            } else {
                alert('密码不能为空')
            }
        } else {
            alert('请输入正确的手机号')
        }
    }
    return (
        <div className='jxy_wei'>
            <div className='wei_top'>
                <div className="kong"></div>
                <div className='wei_top_she'>
                    <div><Scan /></div>
                    <div><Setting /></div>
                </div>
                <div className="wei_top_text">
                    <div className='text'>
                        登入智慧社区，体验更多功能
                    </div>
                    <div className='wei_top_icon'>
                        <div className='jxy_ioc' onClick={() => { navigate('/facelogin') }}>
                            <svg t="1730449377256" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12718" height={'12vh'} width={'14vw'}><path d="M853.333333 56.888889H750.933333A11.377778 11.377778 0 0 0 739.555556 68.266667v34.133333a11.377778 11.377778 0 0 0 11.377777 11.377778H853.333333a56.888889 56.888889 0 0 1 56.888889 56.888889v102.4a11.377778 11.377778 0 0 0 11.377778 11.377777h34.133333a11.377778 11.377778 0 0 0 11.377778-11.377777V170.666667A113.777778 113.777778 0 0 0 853.333333 56.888889zM170.666667 56.888889A113.777778 113.777778 0 0 0 56.888889 170.666667v102.4A11.377778 11.377778 0 0 0 68.266667 284.444444h34.133333a11.377778 11.377778 0 0 0 11.377778-11.377777V170.666667a56.888889 56.888889 0 0 1 56.888889-56.888889h102.4a11.377778 11.377778 0 0 0 11.377777-11.377778V68.266667A11.377778 11.377778 0 0 0 273.066667 56.888889zM910.222222 750.933333V853.333333a56.888889 56.888889 0 0 1-56.888889 56.888889H750.933333a11.377778 11.377778 0 0 0-11.377777 11.377778v34.133333a11.377778 11.377778 0 0 0 11.377777 11.377778H853.333333a113.777778 113.777778 0 0 0 113.777778-113.777778V750.933333a11.377778 11.377778 0 0 0-11.377778-11.377777h-34.133333a11.377778 11.377778 0 0 0-11.377778 11.377777zM170.666667 910.222222a56.888889 56.888889 0 0 1-56.888889-56.888889V750.933333a11.377778 11.377778 0 0 0-11.377778-11.377777H68.266667A11.377778 11.377778 0 0 0 56.888889 750.933333V853.333333a113.777778 113.777778 0 0 0 113.777778 113.777778h102.4a11.377778 11.377778 0 0 0 11.377777-11.377778v-34.133333a11.377778 11.377778 0 0 0-11.377777-11.377778zM512 256a111.312593 111.312593 0 0 1 56.888889 207.265185l-56.888889 33.374815-56.888889-33.46963A111.312593 111.312593 0 0 1 512 256m0 287.952593l67.602963 22.281481a207.644444 207.644444 0 0 1 136.533333 146.962963l0.474074 1.991111 0.663704 1.896296a38.968889 38.968889 0 0 1-36.977778 50.915556h-336.592592a38.968889 38.968889 0 0 1-36.977778-50.915556l0.663704-1.896296 0.474074-1.991111a207.17037 207.17037 0 0 1 136.533333-146.962963L512 543.952593M512 199.111111a168.201481 168.201481 0 0 0-85.333333 312.888889 264.059259 264.059259 0 0 0-174.08 187.543704A95.857778 95.857778 0 0 0 343.608889 824.888889h336.687407a95.857778 95.857778 0 0 0 91.022223-125.345185A264.533333 264.533333 0 0 0 597.333333 512a168.201481 168.201481 0 0 0-85.333333-312.888889z" fill="#0097FF" p-id="12719"></path></svg>
                        </div>
                        <div className='jxy_ioc' onClick={() => { setShowBottom(true) }}>
                            <svg t="1730449227794" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10642" height={'12vh'} width={'14vw'}><path d="M493.572336 922.828511h-216.073395c-54.921665 0-99.726182-44.804517-99.726182-99.726182v-654.724065c0-54.921665 44.804517-99.726182 99.726182-99.726182h389.510233c54.921665 0 99.726182 44.804517 99.726182 99.726182v291.229358c0 13.730416-11.562456 25.292872-25.292872 25.292872s-25.292872-11.562456-25.292872-25.292872v-291.229358c0-26.738179-22.402258-49.140438-49.140438-49.140438h-389.510233c-26.738179 0-49.140438 22.402258-49.140437 49.140438v654.724065c0 26.738179 22.402258 49.140438 49.140437 49.140437h216.073395c13.730416 0 25.292872 11.562456 25.292872 25.292873s-10.839802 25.292872-25.292872 25.292872z" fill="#0090FF" p-id="10643"></path><path d="M671.345095 979.918137c-7.226535 0-13.730416-3.613267-18.066337-10.117149l-26.738179-41.191249c-19.511644-11.562456-83.827805-55.644319-101.894143-141.640085-2.890614-14.45307-5.058574-29.628793-5.058574-44.804516 0-115.624559 94.667608-210.292167 211.01482-210.292167s211.01482 94.667608 211.01482 211.01482c0 114.901905-92.499647 208.124206-206.678899 211.01482l-54.921666 24.570219c-2.16796 1.445307-5.781228 1.445307-8.671842 1.445307z m59.257587-404.685956c-92.499647 0-167.65561 75.155963-167.655611 166.932957 0 12.285109 1.445307 24.570219 3.613268 35.410021 16.62103 79.491884 83.827805 114.901905 84.550458 115.624559 3.613267 1.445307 6.503881 4.335921 7.949189 7.226535l19.511644 30.351446 42.636556-18.78899c2.890614-1.445307 5.781228-2.16796 8.671842-2.167961 92.499647 0 167.65561-75.155963 167.655611-167.65561s-74.43331-166.932957-166.932957-166.932957z" fill="#0090FF" p-id="10644"></path><path d="M637.380381 737.106563m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="#0090FF" p-id="10645"></path><path d="M734.215949 737.106563m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="#0090FF" p-id="10646"></path><path d="M830.328864 737.106563m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="#0090FF" p-id="10647"></path><path d="M451.658433 764.567396h-228.358504c-13.730416 0-25.292872-11.562456-25.292872-25.292872s11.562456-25.292872 25.292872-25.292873h228.358504c13.730416 0 25.292872 11.562456 25.292873 25.292873s-11.562456 25.292872-25.292873 25.292872z" fill="#0090FF" p-id="10648"></path></svg>
                        </div>
                        <div className='jxy_ioc' onClick={() => { setShowBottom1(true) }}>
                            <svg t="1730449293937" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11665" height={'12vh'} width={'14vw'}><path d="M827.472 394.408h-61.26v-75.602c0-144.915-116.398-258.325-257.296-258.325-140.903 0-251.173 113.41-251.173 258.325v75.602h-67.387c-24.506 0-36.756 18.902-36.756 37.802v466.244c0 25.202 18.377 44.103 36.756 44.103h637.116c24.505 0 42.883-18.901 42.883-44.103V432.21c-6.123-18.9-18.378-37.802-42.883-37.802z m-490.086-75.602c0-100.811 79.637-176.419 171.53-176.419 98.016 0 171.53 81.91 171.53 176.419v75.602h-343.06v-75.602z m447.203 541.84h-551.35V476.32h557.477v384.328h-6.127z" fill="#1AA5FF" p-id="11666"></path><path d="M208.823 446.789h607.458v441.776H208.823z" fill="#1AA5FF" p-id="11667"></path></svg>
                        </div>
                        <div className='jxy_ioc' onClick={() => { navigate('/zhuc') }}>
                            <svg t="1730449478556" className="icon" viewBox="0 0 1399 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15016" height={'12vh'} width={'15vw'}><path d="M612.966174 527.658446c-82.347207 56.607467-136.895994 151.306755-136.895994 259.381226 0 57.643045 15.44634 111.16873 42.196705 157.482796H39.642458c-19.5637 0-34.997563-16.469441-34.997563-38.079345v-47.349644c0-3.081782 1.023102-7.199142 2.05868-11.316503 10.293401-31.903304 31.903304-59.701725 64.854664-84.405887 25.727264-18.528122 57.630568-34.997563 95.72239-48.372746 58.666147-20.586802 120.426552-28.821523 141.013354-30.880203 1.023102 0-1.023102-53.525685 0-54.561263 0 0 0-19.551223-11.316502-31.915781 0 0 0-1.023102-1.023102-1.023102-33.974461-28.821523-62.783507-68.959548-83.370309-117.34477-1.023102-1.023102-2.05868-2.05868-3.081782-2.058681-29.857101-4.11736-56.619943-36.033142-65.877765-78.229847-10.293401-46.326543 1.023102-90.581928 28.821522-108.074471 1.023102-1.035579 2.05868-2.05868 2.05868-4.11736-1.023102-88.523248 19.5637-159.541476 63.819086-209.985379 54.548786-62.783507 130.719953-76.171167 186.304318-76.171167 54.548786 0 131.755532 13.38766 188.362998 78.229847 43.232284 50.431426 64.854664 120.426552 63.819086 209.972902 0 1.023102 1.035579 3.094259 2.05868 4.117361 26.762842 17.492543 39.114923 60.724827 28.821523 108.074471-9.270299 42.196705-37.056243 74.112487-65.877766 78.229847-1.023102 0-3.094259 1.023102-3.094259 2.05868-8.247198 16.481918-16.494395 31.928258-25.752217 46.339019" fill="#1aa5ff" p-id="15017"></path><path d="M791.035771 1022.752315c-130.719953 0-235.712643-106.015791-235.712642-235.712643 0-130.719953 106.015791-235.712643 235.712642-235.712642 129.696852 0 235.712643 106.015791 235.712643 235.712642 1.023102 130.719953-104.992689 235.712643-235.712643 235.712643m98.816649-268.651525h-64.842187v-64.854665c0-18.528122-14.410761-32.938883-32.938883-32.938883-18.528122 0-32.938883 14.410761-32.938883 32.938883v64.854665h-65.877766c-18.528122 0-32.938883 14.410761-32.938883 32.938882 0 18.528122 14.410761 32.938883 32.938883 32.938883h65.877766V885.856321c0 18.528122 14.410761 32.938883 32.938883 32.938883 18.528122 0 32.938883-14.410761 32.938883-32.938883v-65.877766h64.842187c18.528122 0 32.938883-14.410761 32.938883-32.938883 0-18.528122-14.410761-32.938883-32.938883-32.938882z" fill="#1aa5ff" p-id="15018"></path></svg>
                        </div>
                    </div>
                </div>
            </div>
            <Popup
                visible={showBottom}
                position="bottom"
                onClose={() => {
                    setShowBottom(false)
                }}
            >
                <div className='popup_login'>
                    <Form layout='horizontal'>
                        <Form.Item label='手机号' name='username'>
                            <Input placeholder='请输入手机号' clearable value={tel} onChange={(e) => { settel(e) }} />
                        </Form.Item>
                        <Form.Item
                            label='短信验证码'
                            extra={
                                <div className='extraPart'>
                                    <a onClick={yan}>{tim}</a>
                                </div>
                            }
                        >
                            <Input placeholder='请输入验证码' clearable value={yana} onChange={(e) => { setyana(e) }} />
                        </Form.Item>
                    </Form>
                    <Button block type="primary" color='blue' onClick={loginyan}>
                        登入
                    </Button>
                </div>
            </Popup>
            <Popup
                visible={showBottom1}
                position="bottom"
                onClose={() => {
                    setShowBottom(false)
                }}
            >
                <div className='popup_login'>
                    <Form layout='horizontal'>
                        <Form.Item label='手机号' name='username'>
                            <Input placeholder='请输入手机号' clearable value={tel1} onChange={(e) => { settel1(e) }} />
                        </Form.Item>
                        <Form.Item label='密码' name='password'>
                            <Input placeholder='请输入密码' clearable value={password} onChange={(e) => { setpassword(e) }} />
                        </Form.Item>
                    </Form>
                    <Button block type="primary" color='blue' onClick={loginpass}>
                        登入
                    </Button>
                </div>
            </Popup>

        </div>
    )
}
